<script setup lang='ts'>
import { useExportStatusStatistics, useStatusStatistics, useSubscriptionStatistics } from '@fl/api/anjutong'
import { ElCard } from 'element-plus'

const { data, isLoading } = useStatusStatistics()
const { data: SubscriptionStatisticsData } = useSubscriptionStatistics()
const childTable = ref()
const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})

const gridOptions = reactive({
    align: 'center',
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'rq', title: '日期', width: 150 },
        {
            children: [
                { field: 'zxcq', title: '中心城区(套)', width: 150 },
                { field: 'ycq', title: '远城区(套)', width: 150 },
                { field: 'zs', title: '总计(套)', width: 150 },
            ],
            title: '平台认购房源情况',
        },
        {
            children: [
                { field: 'zxcqWq', title: '中心城区(套)', width: 150 },
                { field: 'ycqWq', title: '远城区(套)', width: 150 },
                { field: 'zsWq', title: '总计(套)', width: 150 },
                { field: 'mjWq', title: '网签面积(万平方米)', width: 150 },
                { field: 'jeWq', title: '网签金额(亿元)', width: 150 },
            ],
            title: '合同网签情况',
        },
        {
            children: [
                { field: 'sxzxcqTs', title: '中心城区(套)', width: 150 },
                { field: 'sxycqTs', title: '远城区(套)', width: 150 },
                { field: 'sxzsTs', title: '总计(套)', width: 150 },
                { field: 'mjSx', title: '网签面积(万平方米)', width: 150 },
                { field: 'jeSx', title: '网签金额(亿元)', width: 150 },
            ],
            title: '房交会上线企业成交情况',
        },
        {
            children: [
                { field: 'receiveCount', title: '总领取人数', width: 100 },
                { field: 'receiveQuantity', title: '总领取张数', width: 100 },
            ],
            title: '优惠券领取情况',
        },
    ],
    data,
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 700,
    keepSource: true,
    showOverflow: true,
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },

})
const { isPending, mutateAsync } = useExportStatusStatistics()
async function exportFile() {
    const res = await mutateAsync()
    if (res) {
        const objectUrl = URL.createObjectURL(res)
        location.href = objectUrl
        URL.revokeObjectURL(objectUrl)
    }
}
const SubscriptionStatistics = computed(() => {
    return `2024年5月6日0:00至${SubscriptionStatisticsData.value?.rqEnd}24:00，房交会线上平台累计上线${SubscriptionStatisticsData.value?.xms}个项目，${SubscriptionStatisticsData.value?.fys}万套房源。`
})
</script>

<template>
    <ElCard shadow="never">
        <vxe-grid v-bind="gridOptions"
                  ref="childTable"
                  v-model:pager="tablePage"
                  :loading="isLoading"
        >
            <template #toolbar_buttons>
                <el-button type="primary"
                           :loading="isPending"
                           class="mr-20"
                           @click="exportFile"
                >
                    导出
                </el-button>

                <span class="text-16">{{ SubscriptionStatistics }}</span>
            </template>
        </vxe-grid>
    </ElCard>
</template>
